<!DOCTYPE html>
<html lang="zh-cn">
    <head>

        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
        <meta name="format-detection" content="telephone=yes"/>
        <meta name="msapplication-tap-highlight" content="no" />

        <title>头部和底部专题</title>

        <!-- 非专题样式表 -->
        <link href="../css/notTheme.css" type="text/css" rel="stylesheet" />
        <link href="../css/manual.css" type="text/css" rel="stylesheet" />

        <!-- 头部专题样式 -->
        <link href="../css/nav-commons.css" type="text/css" rel="stylesheet" />
        <link href="../css/nav-custom.css" type="text/css" rel="stylesheet" />

        <!-- 底部专题样式 -->
        <link href="../css/bottom-declare.css" type="text/css" rel="stylesheet" />
        <link href="../css/buttofunctionButtonStyle.css" type="text/css" rel="stylesheet" />

        <!-- 手机显示菜单样式 -->
        <link href="../css/mobileShowMaven.css" type="text/css" rel="stylesheet" />
        <link href="../css/normalize.css" type="text/css" rel="stylesheet" />

        <!-- 手机显示菜单专属JS -->
        <script type="text/javascript" src="../js/modernizr.custom.js"></script>
    </head>

    <body>

        <!-- 使用简要说明 -->
        <div class="manual">
            <p>1、选择专题颜色</p>
            <p>2、点击“生成JS代码”，在代码生成区复制代码</p>
            <p>3、在使用的页面中引入jquery文件，版本建议高于1.9以上(可以使用此地址：http://img2.kunming.cn/zhuanti/TMDlibrary/js/special_topic/jquery-1.12.0.min.js)</p>
            <p>3、在使用的页面中引入文件自动加载文件(可以使用此地址：http://img2.kunming.cn/zhuanti/TMDlibrary/js/special_topic/includeFile.js)</p>
            <p>4、头部专题的，需要在ID为“nav”的容器中加入生成的JS代码：实例如下：</p>
            <p>
                &lt;div id="nav"&gt;<br/>
                &lt;script type='text/javascript' src='http://img2.kunming.cn/zhuanti/TMDlibrary/js/createDomElement.js?type=navCustom&color=1'&gt;&lt;/script&gt;<br />
                &lt;/div&gt;
            </p>
            <p>5、剩余的专题一样</p>
        </div>

        <!-- 专题颜色选择 -->
        <div class="colorSelect">
            <span class="selectTitle">头部专题颜色选择：</span>
            <ul>
                <li>
                    <span class="color1" value="1"></span>
                </li>
                <li>
                    <span class="color2" value="2"></span>
                </li>
                <li>
                    <span  class="color3" value="3"></span>
                </li>
                <li>
                    <span  class="color4" value="4"></span>
                </li>
                <li>
                    <span  class="color5" value="5"></span>
                </li>
            </ul>
        </div>

        <!-- 专题样式模板 -->
        <div class="nav-list nav-style1">

            <div class="mobileNav">
                <div class="mobile-logo"></div>
                <button id="trigger-overlay" type="button" class="showMavenBtn nav-style1">
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </button>

                <div class="overlay overlay-simplegenie mobileStyle1">
                    <button type="button" class="overlay-close">Close</button>
                    <nav>
                        <ul>
                            <li><a href="/">新闻</a></li>
                            <li><a href="/">政务</a></li>
                            <li><a href="/">视频</a></li>
                            <li><a href="/">房产</a></li>
                            <li><a href="/">汽车</a></li>
                            <li><a href="/">旅游</a></li>
                            <li><a href="/">生活</a></li>
                            <li><a href="/">彩龙社区</a></li>
                            <li><a href="/">V观昆明</a></li>
                            <li><a href="/">ENGLISH</a></li>
                            <li><a href="/">昆明日报</a></li>
                            <li><a href="/">都市时报</a></li>
                            <li><a href="/">春城地铁报</a></li>
                            <li><a href="/" class="rangoon"><div class=" img1"></div></a></li>
                        </ul>
                    </nav>
                </div>
            </div>

            <ul class="pcNav">
                <li class="nav-item-style1 mavenItem"><div class="logo"></div></li>
                <li class="nav-item-style1 mavenItem"><a href="/">新闻</a></li>
                <li class="nav-item-style1 mavenItem"><a href="/">政务</a></li>
                <li class="nav-item-style1 mavenItem"><a href="/">视频</a></li>
                <li class="nav-item-style1 mavenItem"><a href="/">房产</a></li>
                <li class="nav-item-style1 mavenItem"><a href="/">汽车</a></li>
                <li class="nav-item-style1 mavenItem"><a href="/">旅游</a></li>
                <li class="nav-item-style1 mavenItem"><a href="/">生活</a></li>
                <li class="nav-item-style1 mavenItem"><a href="/">彩龙社区</a></li>
                <li class="nav-item-style1 mavenItem"><a href="/">V观昆明</a></li>
                <li class="nav-item-style1 mavenItem"><a href="/">ENGLISH</a></li>
                <li class="nav-item-style1 mavenItem"><a class="rangoon img1"></a></li>
                <li class="sum-maven nav-item-style1 ">
                    <div class="down-maven"></div>
                    <ul>
                        <li><a href="#">昆明日报</a></li>
                        <li><a href="#">都市时报</a></li>
                        <li class="bottom-line-style borderRadius"><a href="#">春城地铁报</a></li>
                    </ul>
                </li>
            </ul>
        </div>

        <div class="downJS">
            <span class="downTheme">生产JS代码</span>
            <span class="downThemeImg">下载图片</span>
        </div>

        <div class="code-production">
            <p>代码生成区：</p>
            <textarea id="one"></textarea>
        </div>

        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

        <!-- 定制样式模板 -->
        <div class="nav-custom-list">

            <div class="mobileCustomNav">
                <div class="mobile-custom-logo"></div>
                <button id="trigger-overlay" type="button" class="showCustomMavenBtn nav-custom-style">
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </button>

                <div class="overlay overlay-simplegenie mobileCystomStyle">
                    <button type="button" class="overlay-close">Close</button>
                    <nav>
                        <ul>
                            <li><a href="/">新闻</a></li>
                            <li><a href="/">政务</a></li>
                            <li><a href="/">视频</a></li>
                            <li><a href="/">房产</a></li>
                            <li><a href="/">汽车</a></li>
                            <li><a href="/">旅游</a></li>
                            <li><a href="/">生活</a></li>
                            <li><a href="/">彩龙社区</a></li>
                            <li><a href="/">V观昆明</a></li>
                            <li><a href="/">ENGLISH</a></li>
                            <li><a href="/">昆明日报</a></li>
                            <li><a href="/">都市时报</a></li>
                            <li><a href="/">春城地铁报</a></li>
                            <li><a href="/" class="rangoon"><div class="img2"></div></a></li>
                        </ul>
                    </nav>
                </div>
            </div>

            <ul class="pcNav">
                <li><div class="logo1"></div></li>
                <li><a href="/">新闻</a></li>
                <li><a href="/">政务</a></li>
                <li><a href="/">视频</a></li>
                <li><a href="/">房产</a></li>
                <li><a href="/">汽车</a></li>
                <li><a href="/">旅游</a></li>
                <li><a href="/">生活</a></li>
                <li><a href="/">彩龙社区</a></li>
                <li><a href="/">V观昆明</a></li>
                <li><a href="/">ENGLISH</a></li>
                <li><a class="rangoon1 img2 noBackground"></a></li>
                <li class="sum-custom-maven nav-item-style1">
                    <div class="down-maven1"></div>
                    <ul>
                        <li><a href="#">昆明日报</a></li>
                        <li><a href="#">都市时报</a></li>
                        <li class="bottom-line-custom borderRadius"><a href="#">春城地铁报</a></li>
                    </ul>
                </li>
            </ul>
        </div>

        <div class="downJS">
            <span class="downCustom">生产JS代码</span>
            <span class="downCustomImg">下载图片</span>
        </div>

        <div class="code-production">
            <p>代码生成区：</p>
            <textarea id="two"></textarea>
        </div>

        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

        <!-- 专题颜色选择 -->
        <div class="colorCustomSelect">
            <span class="selectTitle">底部专题颜色选择：</span>
            <ul>
                <li>
                    <span class="color7" value="1">默认</span>
                </li>
                <li>
                    <span class="color6" value="2"></span>
                </li>
            </ul>
        </div>

        <!-- 底部样式专题 -->
        <div class="bottom-declare">
            <div class="declare-content1">
                <div class="declare-item">
                    <ul class="declare-item-padding1">
                        <li><a href="/">站点导航</a></li>
                        <li><a href="/">关于昆明信息港</a></li>
                        <li><a href="/">版权与免责</a></li>
                        <li class="mobilePadding1"><a href="/">广告服务</a></li>
                        <li><a href="/">联系我们</a></li>
                    </ul>
                </div>
                <div class="declare-item">
                    <ul class="declare-item-padding2">
                        <li>广告热线：(0871)65390101</li>
                        <li>新闻热线：(0871)65364045</li>
                        <li>24小时网址违法和不良信息举报电话：0871-65390101</li>
                    </ul>
                </div>
                <div class="declare-item">
                    <ul class="declare-item-padding3">
                        <li>举报邮箱：2779967946@qq.com</li>
                        <li>国新网许可证编号：5312011001</li>
                        <li>增值电信业务经营许可证(ICP)：滇B2-20090009</li>
                    </ul>
                </div>
            </div>

            <div class="copyright">
                <div class="copyright-item">
                    <ul class="mobileItemPadding">
                        <li>
                            <img src="http://www.kunming.cn/_include/new2014/icp1.jpg" />
                        </li>
                        <li>
                            <img src="http://www.kunming.cn/_include/new2014/icp2.jpg" />
                        </li>
                        <li>
                            <img src="http://www.kunming.cn/_include/new2014/icp3.jpg" />
                        </li>
                    </ul>
                </div>
                <div class="copyright-item">
                    <ul>
                        <li>
                            <span class="cop-ico">©</span>
                            昆明信息港2014-All&nbsp;Right&nbsp;Reseved
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="downJS downBottom">
            <span>生产JS代码</span>
        </div>

        <div class="code-production">
            <p>代码生成区：</p>
            <textarea id="three"></textarea>
        </div>
    </body>

    <!-- 必须引入的JS文件,最低版本1.8 -->
    <script type="text/javascript" src="../js/jquery-1.12.0.min.js"></script>

    <!-- 本页面所需JS -->
    <script type="text/javascript" src="../js/jquery.zclip.min.js"></script>
    <script type="text/javascript" src="../js/theme.js"></script>

    <!-- 显示下拉菜单样式(PC端) -->
    <script type="text/javascript" src="../js/showDownMaven.js"></script>

    <!-- 显示菜单专属JS(移动端) -->
    <script type="text/javascript" src="../js/classie.js"></script>
</html>